<template>
  <div class="homepage">

    <!--swiper-->
    <swiper :list="banner_list"></swiper>

    <!--scroller-->
    <scroller lock-x :scroll-bottom-offst="53" ref="scrollerEvent">
      <div style="height: 800px;">
        <div class="course-all">
          <img :src="course_all" class="course-all-img">
          <div style="margin-left: 10px;width: 100%">
            <h2>全程班</h2>
            <p>96课时</p>
            <p>6人以下小班</p>
          </div>
        </div>

        <div class="course-all">
          <div style="margin-right: 10px;width: 100%">
            <h2>冲刺班</h2>
            <p>40课时</p>
            <p>仿真模考,拟真试题</p>
          </div>
          <img :src="course_sprint" class="course-all-img">
        </div>

        <p style="padding:10px;font-size: 13px;color: #333;text-align: center">入学测试并根据测试结果量身设计学习计划</p>
        <p style="padding:10px;font-size: 13px;color: #333;text-align: center">个性化提分辅导方案，课后持续练习</p>
        <p style="padding:10px;font-size: 13px;color: #333;text-align: center">专人点评，时刻保持状态</p>
        <p style="padding:10px;font-size: 13px;color: #333;text-align: center">由公务员面试主考官全程主讲并辅导</p>
        <p style="padding:10px;font-size: 13px;color: #333;text-align: center">全方位覆盖考点，学习无死角，高分有保障。</p>
        <p style="padding:10px;font-size: 13px;color: #333;text-align: center">保证高通过率</p>

        <!--divider-->
        <divider>{{divider}}</divider>
      </div>
    </scroller>

    <!--footer-->
    <tabbar>
      <tabbar-item @on-item-click="actionsheet.show.phone = true">
        <img slot="icon" src="../assets/images/footer/contect.png">
        <span slot="label">电话咨询</span>
      </tabbar-item>
      <tabbar-item @on-item-click="dialog.show = true">
        <img slot="icon" src="../assets/images/footer/course.png">
        <span slot="label">课程详情</span>
      </tabbar-item>
      <tabbar-item>
        <img slot="icon" src="../assets/images/footer/student.png">
        <span slot="label">在线报名</span>
      </tabbar-item>
    </tabbar>

    <!--actionsheet-->
    <actionsheet v-model="actionsheet.show.phone" :menus="actionsheet.menus.phone"
                 @on-click-menu="clickActionSheetItem"></actionsheet>

    <!--x-dialog-->
    <div v-transfer-dom>
      <x-dialog v-model="dialog.show" class="dialog">
        <div class="dialog-content">
          <x-table full-bordered style="background-color:#fff;">
            <thead>
            <tr>
              <th>班型</th>
              <th>课时</th>
              <th>课程时间</th>
              <th>价格</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="course in course_list">
              <td>{{course.name}}</td>
              <td>{{course.lesson}}</td>
              <td>{{course.time}}</td>
              <td>{{course.price}}</td>
            </tr>
            <tr>
              <td>咨询电话</td>
              <td colspan="4">
                <span>13998252355</span>
                <span>13124267809</span>
              </td>
            </tr>
            <tr>
              <td>咨询地址</td>
              <td colspan="4" style="padding: 5px;text-align: left;text-indent: 2em;">
                沈阳市铁西区建设东路35号假日国际A座19楼9室1909
              </td>
            </tr>
            </tbody>
          </x-table>
        </div>
        <div @click="dialog.show=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>
  </div>
</template>

<script>
  import {Swiper, Tabbar, TabbarItem, XTable, Divider, TransferDom, Actionsheet, XDialog, Scroller} from 'vux'
  import bannerPicClass from '../assets/images/banner/class.png'
  import bannerPicLibrary from '../assets/images/banner/library.png'
  import bannerPicOutdoor from '../assets/images/banner/outdoor.png'
  import imgCourseAll from '../assets/images/other/all.jpg'
  import imgCourseSprint from '../assets/images/other/sprint.jpg'

  export default {
    directives: {
      TransferDom
    },
    components: {
      Actionsheet,
      Swiper,
      Tabbar,
      TabbarItem,
      XTable,
      Divider,
      XDialog,
      Scroller
    },
    data() {
      return {
        course_all: imgCourseAll,
        course_sprint: imgCourseSprint,
        divider: '沈阳学敏教育咨询有限公司',
        banner_list: [{
          url: 'javascript:',
          img: bannerPicClass,
          title: '学敏教育bannerPicClass'
        }, {
          url: 'javascript:',
          img: bannerPicLibrary,
          title: '学敏教育bannerPicLibrary'
        }, {
          url: 'javascript:',
          img: bannerPicOutdoor,
          title: '学敏教育bannerPicOutdoor'
        }],
        actionsheet: {
          show: {
            phone: false
          },
          menus: {
            phone: {
              'title.noop': '报名联系电话',
              phone_num_1: '139-9825-2355',
              phone_num_2: '131-2426-7809'
            }
          }
        },
        dialog: {
          show: false
        },
        course_list: [
          {
            name: '知识强化班',
            lesson: '96课时',
            time: '12天12晚',
            price: '22800元'
          },
          {
            name: '考前冲刺班',
            lesson: '40课时',
            time: '5天5晚',
            price: '12800元'
          },
          {
            name: '全程督学班',
            lesson: '136课时',
            time: '17天17晚',
            price: '32800元'
          },
          {
            name: '学敏vip班',
            lesson: '136课时',
            time: '17天17晚',
            price: '45800元（不过退25800元）'
          }
        ]

      }
    },
    mounted() {
      this.$nextTick(() => {
        this.$refs.scrollerEvent.reset({top: 0})
      })
    },
    methods: {
      clickActionSheetItem(key) {
        key === 'phone_num_1' ? window.location.href = "tel:13998252355" : window.location.href = "tel:13124267809"
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '~vux/src/styles/close';

  .homepage {
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: 53px;
  }

  .dialog {
    font-size: 12px;
  }

  .dialog-content {
    padding: 15px;
    max-height: 500px;
    overflow-y: auto;
  }

  .course-all {
    display: flex;
    padding: 15px;
  }

  .course-all .course-all-img {
    height: 100px;
    width: 40%;
    height: 100%;
  }

  .course-all h2 {
    font-weight: 400;
    font-size: 17px;
    line-height: 2;
    text-align: center;
  }

  .course-all p {
    color: #999;
    font-size: 13px;
    line-height: 2;
    text-align: center;
  }
</style>
